<template>
 <div class="traffic">
   <Header :show="true">市内交通</Header>
   <div class="content">
   		<div class="list" v-for="item in arrList.traffic">
   			<p class="title">{{item.title}}</p>
   			<p class="text">{{item.text}}</p>
   		</div>
   </div>
 </div>
</template>

<script>
import Header from '../base/Header'
	export default {
		data() {
			return {
				arrList:{},
				i:0
			}
		},
        components:{
        	Header
        },
        mounted(){
        	var id = this.$route.params.id;
        	this.fetchData(id);
        },
        methods: {
        	fetchData(id) {
        		let _this = this;
        		this.$http.get('static/data/invite.data')
        		.then(function(res){
        			_this.arrList = res.data[id].content;
        			_this.i = id;
        		}).catch(function(err){
        			console.log(err);
        		})
        	}
        }
	}
</script>

<style scoped lang="less">
.traffic{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 11;
  background: #f4f4f4;
	.content{
		background: #f4f4f4;
		padding: 50px 10px 0;
		font-size: 0.3rem;
		.list{
			.title{font-weight: bold;color: #555;padding: 0.4rem 0 0.2rem;}
			.text{color: #666;font-size: 0.26rem;}
		}
	}
}
</style>